<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
      
<head th:include="head :: htmlhead" th:with="title='协议生成管理'"></head>
  
<body>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <ul class="layui-tab-title">
    <li class="layui-this">数据源设置</li>
    <li>Proto设置</li>
    <li>SVN设置</li>
    <li>版本管理</li>
    <li>模板管理</li>
  </ul>
  <div class="layui-tab-content" style="height: 100px;">
    <div class="layui-tab-item layui-show">
		<!-- 数据源设置 -->
		<form class="layui-form" action="">
		  	<!-- 单选按钮 -->
			<div class="layui-form-item">
			    <label class="layui-form-label layui-form">选择数据源</label>
			    <div class="layui-input-block">
			      <input type="radio" name="dbType" lay-filter="dbType" value="1" title="mysql" th:checked="${data.dbInfo.dbType==1}" >
			      <input type="radio" name="dbType" lay-filter="dbType" value="2" title="excel" th:checked="${data.dbInfo.dbType==2}">
			    </div>
			</div>
			
			<!-- Mysql数据源内容 -->
			<div class="layui-form-item">
			<div id="mysqlDiv" style="display: true;">
			<div class="layui-form-item layui-inline">
			  <label class="layui-form-label">数据库账号</label>
			  <div class="layui-input-block">
			    <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="输入数据库账号" class="layui-input" th:value="${data.dbInfo.username}">
			  </div>
			</div>
			<div class="layui-form-item layui-inline">
			  <label class="layui-form-label">数据库密码</label>
			  <div class="layui-input-block">
			    <input type="text" name="password" placeholder="输入数据库密码" autocomplete="off" class="layui-input" th:value="${data.dbInfo.password}">
			  </div>
			</div>
			 <div class="layui-form-item">
			  <label class="layui-form-label">数据库连接
			  </label>
			  <div class="layui-input-block">
			    <input type="text" name="url" lay-verify="title" autocomplete="off" placeholder="数据库url" class="layui-input" th:value="${data.dbInfo.url}">
			  </div>
			</div>
			</div>
			
			<!-- Excel表格内容 -->
			<div id="excelDiv" style="display: none; margin: 50px;">
			<p> <font size = 5>回到主页面, 设置模块数据源</font></p>
			</div>
			</div>
			
			<div class="layui-form-item">
			     <div class="layui-input-block">
			         <button  id="submit" class="layui-btn" name="editDb" lay-submit lay-filter="editDb">提交</button>
			     </div>
			 </div>
		</form>
		<!-- end -->
    </div>
    <div class="layui-tab-item">
	   	<!-- Proto设置 -->
	   	<form class="layui-form" action="" lay-filter="example">
		  <div class="layui-form-item ">
		    <label class="layui-form-label" >执行器路径
		    </label>
		    <div class="layui-input-block">
		      <input type="text" name="protoExePath" disabled lay-verify="title" autocomplete="off" placeholder="proto执行文件的路径" class="layui-input" th:value="${data.proto.protoExePath}">
		    </div>
		  </div>
		  
		  <div class="layui-form-item">
		    <label class="layui-form-label" style="white-space:nowrap!important;">文件生成路径</label>
		    <div class="layui-input-block">
		      <input type="text" name="protoPath" disabled placeholder="生成的proto路径" autocomplete="off" class="layui-input" th:value="${data.proto.protoPath}">
		    </div>
		  </div>
		  
		  <div class="layui-form-item">
		    <label class="layui-form-label" style="white-space:nowrap!important;">Java引用路径
		    </label>
		    <div class="layui-input-block">
		      <input type="text" name="javaPackagePath" lay-verify="title" autocomplete="off" placeholder="生成所在的Java包路径" class="layui-input" th:value="${data.proto.javaPackagePath}">
		    </div>
		  </div>
		  
		   <div class="layui-form-item layui-inline">
		    <label class="layui-form-label" style="white-space:nowrap!important;">请求协议前缀</label>
		    <div class="layui-input-block">
		      <input type="text" name="reqPrefix" lay-verify="title" autocomplete="off" placeholder="建议Req作为请求前缀" class="layui-input" th:value="${data.proto.reqPrefix}">
		    </div>
		  </div>
		 
		  <div class="layui-form-item layui-inline">
		    <label class="layui-form-label" style="white-space:nowrap!important;">响应协议前缀</label>
		    <div class="layui-input-block">
		      <input type="text" name="respPrefix" lay-verify="title" autocomplete="off" placeholder="建议Resp作为响应前缀" class="layui-input" th:value="${data.proto.respPrefix}">
		    </div>
		  </div>
		  
		  <div class="layui-form-item layui-inline">
		    <label class="layui-form-label" style="white-space:nowrap!important;">协议对象前缀</label>
		    <div class="layui-input-block">
		      <input type="text" name="pbPrefix" lay-verify="title" autocomplete="off" placeholder="建议Builder作为对象前缀" class="layui-input" th:value="${data.proto.pbPrefix}">
		    </div>
		  </div>
		  
		  <div class="layui-form-item layui-inline">
		    <label class="layui-form-label" style="white-space:nowrap!important;">协议名补充</label>
		    <div class="layui-input-block">
		      <input type="text" name="latterPart" lay-verify="title" autocomplete="off" placeholder="建议PB作为对象前缀" class="layui-input" th:value="${data.proto.latterPart}">
		    </div>
		  </div>
		  
		  <div class="layui-form-item layui-inline">
		    <label class="layui-form-label" style="white-space:nowrap!important;">协议号系数</label>
		    <div class="layui-input-block">
		      <input type="text" name="ptoroCoefficient" lay-verify="title" autocomplete="off" placeholder="建议PB作为对象前缀" class="layui-input" th:value="${data.proto.ptoroCoefficient}">
		    </div>
		  </div>
		  
		  <div class="layui-form-item">
		    <label class="layui-form-label">协议号排序</label>
		    <div class="layui-input-block">
				<input type="radio" name="protoIdSortBy" value="1" title="成对出现" th:checked="${data.proto.protoIdSortBy==1}">
				<input type="radio" name="protoIdSortBy" value="2" title="先请求后响应" th:checked="${data.proto.protoIdSortBy==2}">
				<input type="radio" name="protoIdSortBy" value="3" title="自定义协议号" th:checked="${data.proto.protoIdSortBy==3}">
		    </div>
		  </div>
		  
		  <div class="layui-form-item">
	        <div class="layui-input-block">
	            <button  id="submit" class="layui-btn" name="editProto" lay-submit lay-filter="editProto">提交</button>
	        </div>
		   </div>
		</form>
		<!-- end -->
    </div>
     <div class="layui-tab-item">
   	 	<!-- svn设置 -->
   	 	<form class="layui-form" action="" lay-filter="example">
		  <div class="layui-form-item layui-inline">
		    <label class="layui-form-label">账号
		    </label>
		    <div class="layui-input-block">
		      <input type="text" name="svnAccount" lay-verify="title" autocomplete="off" placeholder="SVN账号" class="layui-input" th:value="${data.svn.account}">
		    </div>
		  </div>
		  <div class="layui-form-item layui-inline">
		    <label class="layui-form-label">密码</label>
		    <div class="layui-input-block">
		      <input type="text" name="svnPassword" placeholder="SVN密码" autocomplete="off" class="layui-input" th:value="${data.svn.password}">
		    </div>
		  </div>
		   <div class="layui-form-item">
		    <label class="layui-form-label" style="white-space:nowrap!important;">check out路径
		    </label>
		    <div class="layui-input-block">
		      <input type="text" name="sourceCheckOutUrl" lay-verify="title" autocomplete="off" placeholder="checkout路径" class="layui-input" th:value="${data.svn.sourceCheckOutUrl}">
		    </div>
		  </div>
		   <div class="layui-form-item">
	        <div class="layui-input-block">
	            <button  id="submit" class="layui-btn" name="editSvn" lay-submit lay-filter="editSvn">提交</button>
	        </div>
		   </div>
		</form>
		<!-- end -->
     </div>
      <div class="layui-tab-item">
      <!-- 版本控制version control -->
      <table class="layui-hide" id="test" lay-filter="test"></table>
	  <script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	  </script>
      <!-- end -->
      </div>
      <div class="layui-tab-item">
      <!-- 模板管理 -->
		<iframe src="/zproto/setting/editTemplate" frameborder="0" id="topFrame" style="width: 100%; height: 800px; "></iframe>     
      </div>
  </div>
</div> 

<script type="text/javascript"  th:inline="none">
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'
    ,url:'/zproto/setting/versionList'
    ,toolbar: 'default' //开启头部工具栏，并为其绑定左侧模板
    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
      title: '提示'
      ,layEvent: 'LAYTABLE_TIPS'
      ,icon: 'layui-icon-tips'
    }]
    ,title: '用户数据表'
    ,cols: [
    	[
	      {type: 'checkbox', fixed: 'left'}
	      ,{field:'version', title:'版本', width:80, edit: 'text'}
	      ,{field:'initDate', title:'创建日期', width:160}
	      ,{field:'modulePath', title:'模块路径'}
	      ,{field:'protoDataPath', title:'协议对象路径'}
	      ,{field:'protoIdPath', title:'协议id路径'}
	      ,{field:'codePath', title:'代码路径'}
	      ,{field:'protoMessagePath', title:'协议消息路径'}
	      ,{field:'genDir', title:'生成路径'}
	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
    	]
    ]
  });
  
  //监听头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
      case 'add':
        layer.open({
            type: 2 //此处以iframe举例
            ,title: '新增版本'
            ,area: ['500px', '300px']
            ,shade: 0
            ,maxmin: true
            ,offset: [ //为了演示，随机坐标
                0
                ,0
            ]
            ,content: '/zproto/setting/addVersionView'
            ,zIndex: layer.zIndex //重点1
            ,success: function(layero){
                layer.setTop(layero); //重点2
            }
        });
      break;
      case 'update':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else if(data.length > 1){
          layer.msg('只能同时编辑一个');
        } else {
          layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
        }
      break;
      case 'delete':
        if(data.length === 0){
          layer.msg('请选择一行');
        }else if(data.length >= 2){
          layer.msg('防误删,每次最多删除1条数据');
        } 
        else {
        	var dels = [];
        	data.forEach(function(n,i){
        		dels.push(n.version);
        	});
        	layer.confirm('真的删除么?', function(index){
                layer.close(index);
                $.ajax({
                    type: 'get',
                    url: '/zproto/setting/deleteVersion',
                    dataType:"json", //返回格式为json
                    data:{versions:dels}, //参数值
                    contentType: 'application/x-www-form-urlencoded',
                    success: function(ret){
                        if(ret.code==0){
                            layer.alert("删除成功！");
                            location.reload();//重新加载页面表格
                        }else{
                            layer.alert(ret.tips);
                        }
                    },
                    error: function(jqXHR){console.log(jqXHR)},
                });
                //向服务端发送删除指令
            });
        }
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.prompt({
        formType: 2
        ,value: data.email
      }, function(value, index){
        obj.update({
          email: value
        });
        layer.close(index);
      });
    }
  });
});

//表单操作
layui.use(function(){
    var form = layui.form;
    
    //	修改数据库配置
    form.on('submit(editDb)', function (data) {
        var d = {};
        d.dbType = data.field.dbType;
        d.username=data.field.username;
		d.password=data.field.password;
		d.url=data.field.url;
        $.ajax({
            type: 'POST',
            url: '/zproto/setting/addSettingDb',
            data: JSON.stringify(d),
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function(data){
                var str = data.tips;
                if(data.code == 0){
                	layer.msg(str, {icon: 1});
                }else{
                	layer.msg(str, {icon: 2});
                }
            },
            error: function(jqXHR){console.log(jqXHR)},
        });
        return false;
	});
    
    //	修改proto配置
	form.on('submit(editProto)', function (data) {
		var d = {};
		d.protoExePath=$("input[name='protoExePath']").val();
		d.protoPath=$("input[name='protoPath']").val();
		d.javaPackagePath=$("input[name='javaPackagePath']").val();
		//d.protoIdSortBy=$("input[name='protoIdSortBy']").val();
		d.protoIdSortBy=$("input[name='protoIdSortBy']:checked").val();
		d.reqPrefix=$("input[name='reqPrefix']").val();
		d.respPrefix=$("input[name='respPrefix']").val();
		d.pbPrefix=$("input[name='pbPrefix']").val();
		d.ptoroCoefficient=$("input[name='ptoroCoefficient']").val();
		              
		$.ajax({
		    type: 'POST',
		    url: '/zproto/setting/addSettingProto',
		    data: JSON.stringify(d),
		    dataType: 'json',
		    contentType: "application/json; charset=utf-8",
		    success: function(data){
		        var str = data.tips;
		        if(data.code == 0){
		        	layer.msg(str, {icon: 1});
		        }else{
		        	layer.msg(str, {icon: 2});
		        }
		    },
		    error: function(jqXHR){console.log(jqXHR)},
		});
   		return false;
	});
    
	//	修改svn配置
    form.on('submit(editSvn)', function (data) {
        var d = {};
		d.account=data.field.svnAccount;
        d.password=data.field.svnPassword;
        d.sourceCheckOutUrl=data.field.sourceCheckOutUrl;
        
        $.ajax({
            type: 'POST',
            url: '/zproto/setting/addSettingSvn',
            data: JSON.stringify(d),
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function(data){
                var str = data.tips;
                if(data.code == 0){
                	layer.msg(str, {icon: 1});
                }else{
                	layer.msg(str, {icon: 2});
                }
            },
            error: function(jqXHR){console.log(jqXHR)},
        });
        return false;
	});
    
    layer.ready(function(){
    	var val = $("input[name='dbType']:checked").val();
    	if(val == '1'){
            $("#mysqlDiv").css("display", "block");
            $("#excelDiv").css("display", "none");
        } else {
            $("#excelDiv").css("display", "block");
            $("#mysqlDiv").css("display", "none");
        }
   	});  
	
    //	单选框事件
    form.on('radio(dbType)', function(data){
        if(data.value == '1'){
            $("#mysqlDiv").css("display", "block");
            $("#excelDiv").css("display", "none");
        } else {
            $("#excelDiv").css("display", "block");
            $("#mysqlDiv").css("display", "none");
        }
    });
    
});

</script>

</body>
</html>
